<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 教练详情</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .gallery-slider {
            scroll-snap-type: x mandatory;
        }
        
        .gallery-slider > div {
            scroll-snap-align: start;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto bg-white bg-opacity-90 backdrop-blur-md">
        <div class="flex items-center px-4 py-3">
            <button class="w-8 h-8 flex items-center justify-center" onclick="window.history.back()">
                <i class="fa-solid fa-arrow-left text-gray-800"></i>
            </button>
            <div class="ml-3 flex-1 text-lg font-medium">教练详情</div>
            <button class="w-8 h-8 flex items-center justify-center">
                <i class="fa-regular fa-heart text-gray-800"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center ml-1">
                <i class="fa-solid fa-share-nodes text-gray-800"></i>
            </button>
        </div>
    </header>

    <!-- 页面内容区 -->
    <main class="pt-14 pb-24">
        <!-- 教练信息和照片 -->
        <div>
            <!-- 照片轮播 -->
            <div class="relative">
                <div class="w-full aspect-[4/3] overflow-x-auto flex gallery-slider no-scrollbar">
                    <div class="min-w-full">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=600&auto=format&fit=crop" 
                             alt="教练照片" class="w-full h-full object-cover">
                    </div>
                    <div class="min-w-full">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=600&auto=format&fit=crop" 
                             alt="教练授课照片" class="w-full h-full object-cover">
                    </div>
                    <div class="min-w-full">
                        <img src="https://images.unsplash.com/photo-1510894347713-fc3ed6fdf539?q=80&w=600&auto=format&fit=crop" 
                             alt="教练授课照片" class="w-full h-full object-cover">
                    </div>
                </div>
                
                <!-- 页码指示器 -->
                <div class="absolute bottom-3 left-0 right-0 flex justify-center space-x-1.5">
                    <div class="w-2 h-2 rounded-full bg-white bg-opacity-90"></div>
                    <div class="w-2 h-2 rounded-full bg-white bg-opacity-50"></div>
                    <div class="w-2 h-2 rounded-full bg-white bg-opacity-50"></div>
                </div>
            </div>
            
            <!-- 教练基本信息 -->
            <div class="p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <h1 class="text-xl font-medium">林教练</h1>
                        <!-- 金牌教练标识 -->
                        <div class="ml-2 bg-yellow-500 bg-opacity-90 text-white text-xs px-1.5 py-0.5 rounded-sm flex items-center">
                            <i class="fa-solid fa-medal mr-0.5"></i>
                            <span>金牌教练</span>
                        </div>
                    </div>
                    <div class="flex items-center text-yellow-500">
                        <i class="fa-solid fa-star mr-1"></i>
                        <span class="font-medium">5.0</span>
                        <span class="text-sm text-gray-500 ml-1">(128评)</span>
                    </div>
                </div>
                
                <div class="flex flex-wrap mb-4">
                    <div class="flex items-center mr-4 mb-2">
                        <i class="fa-solid fa-medal text-primary-dark mr-1.5"></i>
                        <span class="text-sm">瑜伽教练</span>
                    </div>
                    <div class="flex items-center mr-4 mb-2">
                        <i class="fa-solid fa-clock text-primary-dark mr-1.5"></i>
                        <span class="text-sm">5年教龄</span>
                    </div>
                    <div class="flex items-center mr-4 mb-2">
                        <i class="fa-solid fa-certificate text-primary-dark mr-1.5"></i>
                        <span class="text-sm">已认证</span>
                    </div>
                </div>
                
                <div class="flex flex-wrap mb-4">
                    <span class="text-xs bg-pink-50 text-primary-light px-2 py-1 rounded-full mr-1.5 mb-1.5">哈他瑜伽</span>
                    <span class="text-xs bg-pink-50 text-primary-light px-2 py-1 rounded-full mr-1.5 mb-1.5">流瑜伽</span>
                    <span class="text-xs bg-pink-50 text-primary-light px-2 py-1 rounded-full mr-1.5 mb-1.5">阴瑜伽</span>
                    <span class="text-xs bg-pink-50 text-primary-light px-2 py-1 rounded-full mr-1.5 mb-1.5">理疗瑜伽</span>
                    <span class="text-xs bg-pink-50 text-primary-light px-2 py-1 rounded-full mr-1.5 mb-1.5">冥想</span>
                </div>
                
                <div class="flex items-center text-sm text-gray-500 mb-2">
                    <i class="fa-solid fa-location-dot mr-1.5"></i>
                    <span>朝阳区望京SOHO T1 - 3.5km</span>
                </div>
                
                <div class="flex items-center text-sm text-gray-500">
                    <i class="fa-regular fa-clock mr-1.5"></i>
                    <span>9:00-21:00 可提供服务</span>
                </div>
            </div>
        </div>
        
        <!-- 内容标签页 -->
        <div class="bg-white mt-2">
            <div class="flex border-b">
                <button class="flex-1 py-3 text-center text-primary-dark font-medium border-b-2 border-primary-dark">
                    教练介绍
                </button>
                <button class="flex-1 py-3 text-center text-gray-500">
                    评价 (128)
                </button>
            </div>
            
            <!-- 教练介绍内容 -->
            <div class="p-4">
                <!-- 教练简介 -->
                <div class="mb-4">
                    <h3 class="font-medium mb-2">关于林教练</h3>
                    <div class="text-sm text-gray-700 leading-relaxed">
                        <p class="mb-2">林教练拥有瑜伽联盟RYT500认证，专注于哈他瑜伽、流瑜伽以及疗愈瑜伽教学。5年专业瑜伽教学经验，曾在印度瑜伽发源地瑞诗凯诗进修学习，后在多家知名瑜伽馆担任高级教练。</p>
                        <p class="mb-2">擅长根据学员的身体状况定制个性化的练习方案，特别针对现代都市人群常见的颈肩紧张、腰背疼痛、压力管理等问题提供专业指导。教学风格温和耐心，注重呼吸与体式的结合，帮助学员在练习中找到身心平衡。</p>
                    </div>
                </div>
                
                <!-- 专业技能 -->
                <div class="mb-4">
                    <h3 class="font-medium mb-2">专业技能</h3>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <div class="w-24 text-sm">哈他瑜伽</div>
                            <div class="flex-1 h-2 bg-gray-100 rounded-full">
                                <div class="h-full bg-primary-light rounded-full" style="width:95%"></div>
                            </div>
                            <div class="w-8 text-right text-sm">95%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-sm">流瑜伽</div>
                            <div class="flex-1 h-2 bg-gray-100 rounded-full">
                                <div class="h-full bg-primary-light rounded-full" style="width:90%"></div>
                            </div>
                            <div class="w-8 text-right text-sm">90%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-sm">理疗瑜伽</div>
                            <div class="flex-1 h-2 bg-gray-100 rounded-full">
                                <div class="h-full bg-primary-light rounded-full" style="width:85%"></div>
                            </div>
                            <div class="w-8 text-right text-sm">85%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-24 text-sm">冥想引导</div>
                            <div class="flex-1 h-2 bg-gray-100 rounded-full">
                                <div class="h-full bg-primary-light rounded-full" style="width:80%"></div>
                            </div>
                            <div class="w-8 text-right text-sm">80%</div>
                        </div>
                    </div>
                </div>
                
                <!-- 资质证书 -->
                <div class="mb-4">
                    <h3 class="font-medium mb-2">资质证书</h3>
                    <div class="space-y-2 text-sm text-gray-700">
                        <div class="flex items-start">
                            <i class="fa-solid fa-certificate text-primary-dark mr-2 mt-0.5"></i>
                            <div>瑜伽联盟注册教师RYT500认证</div>
                        </div>
                        <div class="flex items-start">
                            <i class="fa-solid fa-certificate text-primary-dark mr-2 mt-0.5"></i>
                            <div>国际理疗瑜伽专业认证</div>
                        </div>
                        <div class="flex items-start">
                            <i class="fa-solid fa-certificate text-primary-dark mr-2 mt-0.5"></i>
                            <div>中国健身瑜伽协会高级教练</div>
                        </div>
                    </div>
                </div>
                
                <!-- 教学风格 -->
                <div class="mb-4">
                    <h3 class="font-medium mb-2">教学风格</h3>
                    <div class="text-sm text-gray-700">
                        林教练的教学风格温和且个性化，注重与学员的沟通，根据每个人的身体状况和目标定制合适的练习方案。课程中强调正确的姿势和呼吸，确保学员在安全的环境中获得最大收益。无论是初学者还是有经验的练习者，都能在林教练的指导下找到适合自己的练习节奏。
                    </div>
                </div>
                
                <!-- 适合人群 -->
                <div>
                    <h3 class="font-medium mb-2">适合人群</h3>
                    <div class="flex flex-wrap gap-2">
                        <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">初学者</span>
                        <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">中级练习者</span>
                        <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">有颈肩问题者</span>
                        <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">久坐办公族</span>
                        <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">压力管理</span>
                        <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">想提高柔韧性</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 底部预约栏 -->
    <div class="fixed bottom-0 left-0 right-0 z-20 max-w-md mx-auto bg-white border-t border-gray-100 py-3 px-4 flex items-center justify-between">
        <div>
            <div class="text-lg font-medium text-primary-dark">¥200/h</div>
            <div class="text-xs text-gray-500">已有256人预约</div>
        </div>
        <div>
            <button class="gradient-bg text-white py-2.5 px-8 rounded-full text-sm font-medium" onclick="window.location.href='order_confirm.html'">
                立即预约
            </button>
        </div>
    </div>
</body>
</html> 